<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue+boostrap 实践3</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-family: 'LiSu';
            font-size: 16px !important;
        }
    </style>
    <script>
        window.onload = function () {
            //alert(1);
            var data = {
                ok: 1, total: 0, foods: [
                    {
                        name: '苹果',
                        status: false,
                        price: 15,
                        isClick: false
                    },
                    {
                        name: '梨子',
                        status: false,
                        price: 10,
                        isClick: false
                    },
                    {
                        name: '殷桃',
                        status: false,
                        price: 22,
                        isClick: false
                    },
                    {
                        name: '西瓜',
                        status: false,
                        price: 13,
                        isClick: false
                    }
                ]
            };
            var demo = new Vue({
                el: '#app',
                data: data,
                methods: {
                    change: function () {
                        this.ok = !this.ok;
                    },
                    UpdateTotal: function (food) {
                        if (food.status == true) {
                            food.price = -Math.abs(food.price);
                        } else {
                            food.price = Math.abs(food.price);
                        }
                        data.total += food.price;
                        food.status = !food.status;
                        food.isClick = !food.isClick;
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div style="width:500px;margin-top: 20px;margin-left: 20px;" id="app">
        <a href="#" v-on:click="change" class="list-group-item active">商品总金额: {{total}}
            <div></div>
        </a>
        <template v-if="ok">
            <div v-for="food in foods">
                <a href="#" v-bind:class="{'color':food.isClick}" class="list-group-item" v-on:click="UpdateTotal(food)">{{food.name}}
                    <span style="float:right" class="label label-default">￥{{food.price}}</span>
                </a>
            </div>
        </template>
    </div>

</body>

</html>